vue中css样式覆盖问题 vue中css样式作用域 vue.js样式不起作用

问题背景：

项目前端使用vue.js和element-ui,由于想要对输入框进行验证，输入值非法时输入框颜色变红，就想要根据el-input编译
后的class进行修改，但是直接在html页面中调用class无效，在网上查资料后，发现把html中的<style scoped>里面
的scoped去掉即可，由于达到效果了就没仔细研究scoped的作用，入坑...
本地测试没有问题后，便直接上线了，but上线后发现其它页面的表格样式全部被覆盖，显示不正常。。。

---

解决思路

F12发现这些出问题的页面均加载出了同class名的其它页面(去掉scoped的html页面)的样式，经过查资料，发现了问题
所在：在vue.js中，<style scoped>的作用域在本html页面，<style>样式的作用域则是全局（即所有html页面），由
于我把其中一个html页面的<style scoped>中的scoped去掉，这个页面的样式就变成了全局样式，当其它页面和这些全
局样式重class名时，样式会被覆盖（vue默认全局样式覆盖局部样式），这样就导致上述情况的发生。

---

后续

如何在<style scoped>局部样式中覆盖全局样式：
    

• 父组件cssName+ /deep/+第三方库需要更改的cssName

    例如 .parentCssName  /deep/  .libCssName{}

---

参考链接
链接描述

链接描述